<template>
  <div class="app">
    <header>
      <div class="header-left">
        <div class="logo">
          <svg width="32" height="32" viewBox="0 0 32 32" class="logo-icon">
            <defs>
              <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:#00d4ff;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#ff6b6b;stop-opacity:1" />
              </linearGradient>
            </defs>
            <circle cx="16" cy="16" r="14" fill="url(#logoGradient)" />
            <text x="16" y="20" text-anchor="middle" fill="white" font-size="12" font-weight="bold">AI</text>
          </svg>
          <h1>AI HUT</h1>
        </div>
      </div>
      

      
      <!-- 右侧功能区 -->
      <div class="header-right">
        <!-- 搜索图标 -->
        <button @click="goToSearch" class="icon-btn search-btn" title="搜索">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M21 21L16.514 16.506L21 21ZM19 10.5C19 15.194 15.194 19 10.5 19C5.806 19 2 15.194 2 10.5C2 5.806 5.806 2 10.5 2C15.194 2 19 5.806 19 10.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
        
        <!-- 用户头像（登录状态） -->
        <div v-if="isLoggedIn" class="user-menu" @click="toggleUserMenu">
          <img :src="userInfo.avatar || defaultAvatar" alt="用户头像" class="user-avatar" />
          <div v-if="showUserMenu" class="user-dropdown">
            <div class="user-info">
              <img :src="userInfo.avatar || defaultAvatar" alt="用户头像" class="dropdown-avatar" />
              <div class="user-details">
                <div class="user-name">{{ userInfo.nickname || '用户' }}</div>
                <div class="user-email">{{ userInfo.email || 'user@example.com' }}</div>
              </div>
            </div>
            <div class="dropdown-divider"></div>
            <router-link to="/profile" class="dropdown-item" @click="showUserMenu = false">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              个人资料
            </router-link>
            <router-link to="/my-works" class="dropdown-item" @click="showUserMenu = false">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                <path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <polyline points="14,2 14,8 20,8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              我的作品
            </router-link>
            <div class="dropdown-divider"></div>
            <button @click="handleLogout" class="dropdown-item logout-btn">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                <path d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <polyline points="16,17 21,12 16,7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <line x1="21" y1="12" x2="9" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              退出登录
            </button>
          </div>
        </div>
        
        <!-- 登录按钮（未登录状态） -->
        <router-link v-else to="/login" class="login-btn">
          登录
        </router-link>
        
        <!-- 伸缩导航图标 -->
        <button @click="toggleMobileNav" class="icon-btn menu-btn" title="菜单">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <line x1="3" y1="6" x2="21" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <line x1="3" y1="12" x2="21" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <line x1="3" y1="18" x2="21" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </div>
    </header>
    
    <!-- 移动端导航菜单 -->
    <div class="mobile-nav" :class="{ 'mobile-nav-open': showMobileNav }">
      <div class="mobile-nav-content">
        <router-link to="/" class="mobile-nav-link" @click="closeMobileNav">首页</router-link>
        <router-link to="/search" class="mobile-nav-link" @click="closeMobileNav">搜索</router-link>
        <router-link to="/design" class="mobile-nav-link" @click="closeMobileNav">设计导航</router-link>
        <template v-if="!isLoggedIn">
          <router-link to="/login" class="mobile-nav-link" @click="closeMobileNav">登录</router-link>
          <router-link to="/register" class="mobile-nav-link" @click="closeMobileNav">注册</router-link>
          <router-link to="/wechat-login" class="mobile-nav-link wechat-btn" @click="closeMobileNav">微信登录</router-link>
        </template>
        <template v-else>
          <router-link to="/my-works" class="mobile-nav-link" @click="closeMobileNav">我的作品</router-link>
          <router-link to="/profile" class="mobile-nav-link" @click="closeMobileNav">个人资料</router-link>
          <button @click="handleLogout" class="mobile-nav-link logout-btn">退出登录</button>
        </template>
      </div>
    </div>
    
    <!-- 遮罩层 -->
    <div v-if="showMobileNav" class="mobile-nav-overlay" @click="closeMobileNav"></div>
    
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useUserStore } from './stores/user';
import { useRouter } from 'vue-router';

// 状态管理和路由
const userStore = useUserStore();
const router = useRouter();
const showUserMenu = ref(false);
const showMobileNav = ref(false);

// 计算属性
const isLoggedIn = computed(() => userStore.isLoggedIn);
const userInfo = computed(() => userStore.getUserInfo || {});
const defaultAvatar = '/img/thumb.jpg';

/**
 * 切换用户菜单显示状态
 */
const toggleUserMenu = () => {
  showUserMenu.value = !showUserMenu.value;
};

/**
 * 切换移动端导航菜单显示状态
 */
const toggleMobileNav = () => {
  showMobileNav.value = !showMobileNav.value;
};

/**
 * 关闭移动端导航菜单
 */
const closeMobileNav = () => {
  showMobileNav.value = false;
};

/**
 * 跳转到搜索页面
 */
const goToSearch = () => {
  router.push('/search');
};

/**
 * 处理用户退出登录
 */
const handleLogout = () => {
  userStore.logout();
  showUserMenu.value = false;
  showMobileNav.value = false;
  router.push('/');
};

/**
 * 点击其他地方关闭用户菜单
 */
const handleClickOutside = (event) => {
  if (!event.target.closest('.user-menu')) {
    showUserMenu.value = false;
  }
};

/**
 * 处理窗口大小变化，关闭移动端导航
 */
const handleResize = () => {
  if (window.innerWidth >= 768) {
    showMobileNav.value = false;
  }
};

// 生命周期钩子
onMounted(() => {
  userStore.initializeAuth();
  document.addEventListener('click', handleClickOutside);
  window.addEventListener('resize', handleResize);
  handleResize(); // 初始化时检查窗口大小
});

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
  window.removeEventListener('resize', handleResize);
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
  color: #ffffff;
}

.app {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

header {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1000;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  transition: transform 0.3s ease;
}

.logo:hover .logo-icon {
  transform: rotate(360deg);
}

.header-left h1 {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(45deg, #00d4ff, #ff6b6b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}



/* 图标按钮样式 */
.icon-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: rgba(255, 255, 255, 0.8);
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transform: scale(1.1);
}

.search-btn:hover {
  background: rgba(0, 212, 255, 0.2);
  color: #00d4ff;
}

.menu-btn:hover {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}

/* 登录按钮样式 */
.login-btn {
  background: linear-gradient(45deg, #00d4ff, #ff6b6b);
  color: white;
  text-decoration: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
}

/* 用户菜单样式 */
.user-menu {
  position: relative;
  cursor: pointer;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.user-avatar:hover {
  border-color: #00d4ff;
  transform: scale(1.1);
}

/* 用户下拉菜单样式 */
.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: rgba(26, 26, 46, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
  min-width: 220px;
  z-index: 1001;
  overflow: hidden;
  animation: dropdownFadeIn 0.3s ease;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-info {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.dropdown-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(0, 212, 255, 0.3);
}

.user-details {
  flex: 1;
}

.user-name {
  color: white;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
}

.user-email {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.dropdown-item svg {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.dropdown-item:hover svg {
  opacity: 1;
}

.dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 8px 0;
}

.logout-btn {
  color: #ff6b6b;
}

.logout-btn:hover {
  background: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
}

/* 移动端导航菜单样式 */
.mobile-nav {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  background: rgba(26, 26, 46, 0.98);
  backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 999;
  transition: right 0.3s ease;
  overflow-y: auto;
}

.mobile-nav-open {
  right: 0;
}

.mobile-nav-content {
  padding: 80px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
  font-weight: 500;
  border-radius: 12px;
  width: 100%;
}

.mobile-nav-link:hover,
.mobile-nav-link.router-link-active {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  transform: translateX(5px);
}

.mobile-nav-link.wechat-btn {
  background: linear-gradient(45deg, #07c160, #00d4ff);
  color: white;
  margin-top: 10px;
}

.mobile-nav-link.logout-btn {
  color: #ff6b6b;
  margin-top: 10px;
}

.mobile-nav-link.logout-btn:hover {
  background: rgba(255, 107, 107, 0.1);
}

.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  backdrop-filter: blur(2px);
}



main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
}

/* 响应式设计 */

@media (max-width: 768px) {
  header {
    padding: 15px 20px;
  }
  
  .header-left h1 {
    font-size: 20px;
  }
  
  .header-right {
    gap: 10px;
  }
  
  .icon-btn {
    width: 36px;
    height: 36px;
  }
  
  .user-avatar {
    width: 36px;
    height: 36px;
  }
  
  .user-dropdown {
    right: -10px;
    min-width: 200px;
  }
  
  main {
    padding: 20px 15px;
  }
}

@media (max-width: 480px) {
  .mobile-nav {
    width: 280px;
  }
  
  .logo {
    gap: 8px;
  }
  
  .header-left h1 {
    font-size: 18px;
  }
}
</style>